<template>
    <el-dialog title="添加" :visible.sync="dialogFormVisible" :close-on-click-modal=this.$store.state.theme.interface.other.closeOnClickModal>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="small">
            <el-form-item label="名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
                <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" show-password placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirm_password">
                <el-input v-model="form.confirm_password" show-password placeholder="请输入确认密码"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="role_ids">
                <el-select v-model="form.role_ids" multiple filterable placeholder="选择角色" style="display: block;">
                    <el-option v-for="item in roleData" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="头像" prop="head_img">
                <div class="block">
                    <i v-if="!imageUrl" class="el-icon-plus head-select-btn" @click="clickSelectHeadImg"></i>
                    <div v-if="imageUrl" class="head-box" @click="clickSelectHeadImg">
                        <i class="el-icon-delete head-del-btn" @click="clickDelHeadImg"></i>
                        <el-image :src="imageUrl" class="head-img">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <div class="block">
                    <el-radio v-model="form.sex" label="1">男</el-radio>
                    <el-radio v-model="form.sex" label="2">女</el-radio>
                </div>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <div class="block">
                    <el-radio v-model="form.status" label="1">正常</el-radio>
                    <el-radio v-model="form.status" label="2">冻结</el-radio>
                </div>
            </el-form-item>
            <el-form-item label="生日" prop="birthday">
                <div class="block">
                    <el-date-picker v-model="form.birthday" type="date" placeholder="生日" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </div>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="add()">确 定</el-button>
        </div>
        <x-material ref="material" :multiple=false title="选择头像" @changeMaterial="changeMaterial" />
    </el-dialog>
</template>
  
<script>
import { getAll } from '@/api/system/auth/role';
import { add } from '@/api/system/auth/admin';
import { isPhone, isMail } from "@/utils/validate";
export default {
    name: "add",
    components: {
        'x-material': () => import('@/components/common/xMaterial'),
    },
    data() {
        let checkIsPhone = (rule, value, callback) => {
            if (!isPhone(value)) {
                callback(new Error('请输入正确手机号'));
            }
            callback();
        };
        let checkIsMail = (rule, value, callback) => {
            if (!isMail(value)) {
                callback(new Error('请输入正确邮箱'));
            }
            callback();
        };
        let checkConfirmPassword = (rule, value, callback) => {
            if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致!'));
            }
            callback();
        };
        return {
            roleData: [],
            imageUrl: '',
            form: {
                name: '',
                mobile: '',
                email: '',
                password: '',
                confirm_password: '',
                role_ids: [],
                head_img: '',
                sex: '1',
                status: '1',
                birthday: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' }
                ],
                mobile: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { validator: checkIsPhone, trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { validator: checkIsMail, trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输密码', trigger: 'blur' }
                ],
                confirm_password: [
                    { required: true, message: '请输确认密码', trigger: 'blur' },
                    { validator: checkConfirmPassword }
                ],
                role_ids: [
                    { required: true, message: '请选择角色', trigger: 'blur' }
                ]
            },
            dialogFormVisible: false
        }
    },
    mounted() {
        this.initRoleData();
    },
    methods: {
        initRoleData() {
            getAll().then(res => {
                this.roleData = res.data
            })
        },
        add() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    let postData = JSON.parse(JSON.stringify(this.form));
                    if (postData.role_ids.constructor === Array) {
                        postData.role_ids = postData.role_ids.join(',');
                    }
                    add(postData).then(res => {
                        this.dialogFormVisible = !this.dialogFormVisible;
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        });
                        this.$emit('updateList');
                    })
                } else {
                    console.log('error submit!');
                    return false;
                }
            });
        },
        clickSelectHeadImg() {
            this.$refs.material.dialogFormVisible = true;
        },
        changeMaterial(material) {
            this.imageUrl = material[0].url;
            this.form.head_img = material[0].path;
        },
        clickDelHeadImg() {
            this.imageUrl = this.form.head_img = '';
        }
    },
    watch: {
        'dialogFormVisible': {
            handler: function () {
                this.$nextTick(() => {
                    this.$refs['form'].resetFields();
                    this.imageUrl = '';
                });
            }
        }
    },
}
</script>
  
<style lang="less" scoped>
.head-select-btn {
    cursor: pointer;
}

.head-box {
    width: 100px;
    height: 100px;
    padding: 2px;
    border-radius: 50%;
    border: 1px solid var(--borderGrey);
    box-sizing: border-box;
    position: relative;
    cursor: pointer;

    &:hover {
        border: 1px solid var(--borderBlue);
    }

    .head-del-btn {
        position: absolute;
        top: 5px;
        right: 5px;
        color: red;
        font-size: 12px;
        z-index: 99;
        border-radius: 50%;
        border: 1px solid var(--borderGrey);
        background-color: white;
        padding: 2px;
        box-sizing: border-box;
        cursor: pointer;

        &:hover {
            border: 1px solid red;
        }
    }

    .head-select-btn {
        cursor: pointer;
    }

    .head-img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        box-sizing: border-box;
    }
}
</style>